<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>鼠标拾取地图坐标</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.4.5&key=gI5YAHaK172hXHGbyV54CKEWRfEQsuhA&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        .dialog,.dialog__overlay {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .dialog {
            position: fixed;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            pointer-events: none;
            z-index: 10;
        }
        .dialog_map{
            height:260px;
            margin-bottom:1em;
        }
        .dialog__overlay {
            position: absolute;
            z-index: 1;
            background: rgba(55, 58, 71, 0.9);
            opacity: 0;
            -webkit-transition: opacity 0.3s;
            transition: opacity 0.3s;
            -webkit-backface-visibility: hidden;
        }

        .dialog--open .dialog__overlay {
            opacity: 1;
            pointer-events: auto;
        }

        .dialog__content {
            width: 50%;
            max-width: 600px;
            min-width: 290px;
            background: #fff;
            padding: 2em;
            text-align: center;
            position: relative;
            z-index: 11;
            opacity: 0;
        }

        .dialog--open .dialog__content {
            pointer-events: auto;
        }
        .dialog.dialog--open .dialog__content,
        .dialog.dialog--close .dialog__content {
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        .dialog.dialog--open .dialog__content {
            -webkit-animation-name: anim-open;
            animation-name: anim-open;
        }

        .dialog.dialog--close .dialog__content {
            -webkit-animation-name: anim-close;
            animation-name: anim-close;
        }

        @-webkit-keyframes anim-open {
            0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); }
            100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
        }

        @keyframes anim-open {
            0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
            100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
        }

        @-webkit-keyframes anim-close {
            0% { opacity: 1; }
            100% { opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); }
        }

        @keyframes anim-close {
            0% { opacity: 1; }
            100% { opacity: 0; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1); }
        }
        .action{
            padding: 0.5em 1em;
            outline: none;
            font-weight: 600;
            border: none;
            color: #fff;
            background: #c94e50;
        }
        html, body {
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .button-group {
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 12px;
            padding: 10px;
        }

        .button-group .button {
            height: 28px;
            line-height: 28px;
            background-color: #0D9BF2;
            color: #FFF;
            border: 0;
            outline: none;
            padding-left: 5px;
            padding-right: 5px;
            border-radius: 3px;
            margin-bottom: 4px;
            cursor: pointer;
        }
        .button-group .inputtext {
            height: 26px;
            line-height: 26px;
            border: 1px;
            outline: none;
            padding-left: 5px;
            padding-right: 5px;
            border-radius: 3px;
            margin-bottom: 4px;
            cursor: pointer;
        }

        #tip {
            background-color: #fff;
            padding-left: 10px;
            padding-right: 10px;
            position: absolute;
            font-size: 12px;
            right: 10px;
            top: 20px;
            border-radius: 3px;
            border: 1px solid #ccc;
            line-height: 30px;
        }


        .amap-info-content {
            font-size: 12px;
        }

        #myPageTop {
            position: absolute;
            top: 5px;
            right: 10px;
            background: #fff none repeat scroll 0 0;
            border: 1px solid #ccc;
            margin: 10px auto;
            padding:6px;
            font-family: "Microsoft Yahei", "微软雅黑", "Pinghei";
            font-size: 14px;
        }
        #myPageTop label {
            margin: 0 20px 0 0;
            color: #666666;
            font-weight: normal;
        }
        #myPageTop input {
            width: 170px;
        }
        #myPageTop .column2{
            padding-left: 25px;
        }
    </style>
</head>

<body>
<div id="container"></div>
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>按关键字搜索：</label>
            </td>
            <td class="column2">
                <label>左击获取经纬度：</label>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
            </td>
            <td class="column2">
                <input type="text" readonly="true" id="lnglat">
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
        document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
        }
    }
</script>
<div id="pickUp">
    拾取坐标
</div>
<input type="text" id="longitude" placeholder="经度" readonly="" value="">
<input type="text" name="" id="latitude" placeholder="纬度" readonly="" value="">

<div id="mapDialog" class="dialog dialog--open" style="display: none;">
    <div class="dialog__overlay"></div>
    <div class="dialog__content" style="max-width:1000px;">
        <div class="dialog_map" style="height:500px;" id="popMapContainer"></div>
        <div id="myPageTop">
            <table>
                <tr>
                    <td>
                        <label>按关键字搜索：</label>
                    </td>
                    <td class="column2">
                        <label>左击获取经纬度：</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="text" class="bddd" placeholder="请输入关键字进行搜索" id="tipinput">
                    </td>
                    <td class="column2">
                        <input type="text" readonly="true" class="bddd" id="lnglat" name="lnglat"  value="">
                    </td>
                </tr>
            </table>
        </div>
        <div><a class="action ahover" id="closeMap">确定</a></div>
    </div>
</div>
</body>
<script>
    var map = new AMap.Map("popMapContainer", {
        resizeEnable: true
    });

    $("#pickUp").on("click",function(){
        console.log(1111);
        $('#mapDialog').show();
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });

        var clickEventListener = map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
        AMap.plugin('AMap.Autocomplete',function(){//回调函数
            //实例化Autocomplete
            var autoOptions = {
                input:"tipinput"//使用联想输入的input的id
            };
            autocomplete= new AMap.Autocomplete(autoOptions);
        })

        AMap.event.addListener(autocomplete, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }

    });

    $('#closeMap').on('click',function(){
        map.clearMap();  // 清除地图覆盖物
        $('#mapDialog').hide();
        if($("#showPos").css("display") == "none"){
            $("#showPos").show();
        }
        if($('#lnglat').val()){
            var result=$('#lnglat').val().split(",");
            $("#longitude").val(result[0]);
            $("#latitude").val(result[1]);
        }else{
            $("#showPos").hide();
        }
    });
</script>
</html>